<template>
  <div class="questions-randoms">
    <!-- 卡片 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="form" label-width="80px">
            <el-form-item class="textLabel" label="关键字">
              <el-input
                placeholder="根据编号搜索"
                size="small"
                clearable
                @clear="getRandomsList()"
                v-model="query.keyword"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" :offset="12" style="text-align: right;">
          <el-button size="small" @click="query.keyword=''">清除</el-button>
          <el-button type="primary" size="small" @click="seach()">搜索</el-button>
        </el-col>
      </el-row>
      <!--  -->
      <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon :closable="false"></el-alert>
      <!-- 表格 -->
      <el-table
        :data="randomslist"
        style="width: 100%"
        :header-cell-style="{background:'#fafafa',borderBottom: '2px solid #e8e8e8'}"
      >
        <!-- 题目编号 -->
        <el-table-column prop="number" label="题目编号" width="220">
          <template v-slot:default="slotProps">
            <a
              :href="slotProps.row.number"
              @click.prevent="openPreviewDialog(slotProps.row)"
            >{{slotProps.row.number}}</a>
          </template>
        </el-table-column>
        <!-- 题型 -->
        <el-table-column prop="questionType" label="题型">
          <template v-slot:default="slotProps">
            <p v-if="slotProps.row.questionType === '1'">单选</p>
            <p v-else-if="slotProps.row.questionType === '2'">多选</p>
            <p v-else>简答</p>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="id" label="编号" width="220px"></el-table-column> -->
        <el-table-column prop="subject" label="学科" width="120px"></el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="220">
          <template v-slot:default="slotProps">{{slotProps.row.addDate | dateFormat}}</template>
        </el-table-column>
        <el-table-column prop="totalSeconds" label="难度">
          <template v-slot:default="slotProps">
            <p v-if="slotProps.row.difficulty === '1'">简单</p>
            <p v-else-if="slotProps.row.difficulty === '2'">一般</p>
            <p v-else>困难</p>
          </template>
        </el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="creator" label="录入人"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="slotProps">
            <el-button
              plain
              type="danger"
              size="small"
              circle
              icon="el-icon-delete"
              @click="delRandomsList(slotProps.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="paginationRandoms"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(query.page)"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="Number(query.pagesize)"
        background
        layout=" prev, pager, next,sizes,jumper"
        :total="Number(total)"
      ></el-pagination>
      <!-- 预览组件 -->
      <el-dialog title="题目预览" :visible.sync="isPreviewShow" width="60%">
        <questions-preview ref="questionsPreview" @close="isPreviewShow=false" v-model="randomStr"></questions-preview>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { getRandoms, delRandoms } from '@/api/questions.js'
import questionsPreview from '../components/questions-preview'
export default {
  name: 'questionsRandoms',
  components: {
    questionsPreview
  },
  watch: {},
  props: {},
  data() {
    return {
      randomStr: {},
      // 查询信息
      query: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      randomslist: [],
      // 查询总条目
      total: 0,
      isPreviewShow: false
    }
  },
  computed: {},
  created() {
    this.getRandomsList()
  },
  mounted() {},
  methods: {
    async getRandomsList() {
      try {
        const { data } = await getRandoms(this.query)
        this.randomslist = data.items
        this.total = data.counts
        this.query.pagesize = data.pagesize
        this.query.page = data.page
        console.log(data)
        // this.$message.success('获取列表成功!')
      } catch (err) {
        this.$message.error('获取列表失败!')
      }
    },
    handleSizeChange(newsize) {
      this.query.pagesize = newsize
      this.getRandomsList()
    },
    handleCurrentChange(newpage) {
      this.query.page = newpage
      this.getRandomsList()
    },
    // 删除
    async delRandomsList(data) {
      // console.log(data)

      try {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        await delRandoms({ id: data.id })

        this.$message.success('删除成功')
        this.getRandomsList()
      } catch (err) {
        this.$message.error('删除商品失败!')
      }
    },
    openPreviewDialog(randomStr) {
      // console.log(randomStr)
      this.randomStr = randomStr
      this.isPreviewShow = true
    },
    search() {
      this.getRandomsList()
      this.query.keyword = ''
    }
  }
}
</script>
<style lang="less">
.questions-randoms {
  // padding: 20px;

  .textLabel {
    font-weight: 700;
    padding: 10px;
    color: #606266;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
}
.paginationRandoms {
  text-align: right;
}
</style>
